<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>潜在客户报表查询</title>
    <#include "../common/link.ftl" >
    <script>
        $(function () {
            //使用日期插件
            $('.input-daterange').datepicker({
                language: "zh-CN",
                autoclose: true,
                todayHighlight: true,
                clearBtn: true
            });

            //模态框远程加载柱状图和饼状图
            $('.btn-chart').click(function () {
                //清空模态框的缓存
                $('#chartModal').removeData('bs.modal');
                //获取按钮url
                var url = $(this).data('url')
                //告诉模态显示那个url上的内容(带上高级查询的条件)
                $('#chartModal').modal({
                    remote: url + "?" + $("#searchForm").serialize()
                })
                $("#chartModal").modal('show');
            })

        })
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl" >
    <#assign currentMenu="customerReport"/>
    <#include "../common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表查询</h1>
        </section>
        <section class="content">
            <div class="box">
                <div class="box-body table-responsive no-padding ">
                    <div style="margin: 10px;">
                        <!--高级查询--->
                        <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
                            <input type="hidden" name="currentPage" id="currentPage" value="1">
                            <div class="form-group">
                                <label for="keyword">员工姓名:</label>
                                <input type="text" class="form-control" id="keyword" name="keyword"
                                       value="${qo.keyword!}">
                            </div>
                            <label for="keyword">时间段:</label>
                        <#--使用时间插件-->
                            <div class="input-daterange input-group" id="datepicker">
                                <input type="text" class="input-sm form-control" name="startTime"
                                       value="${(qo.startTime?string('yyyy-MM-dd'))!}"/>
                                <span class="input-group-addon">to</span>
                                <input type="text" class="input-sm form-control" name="endTime"
                                       value="${(qo.endTime?string('yyyy-MM-dd'))!}"/>
                            </div>
                            <div class="form-group">
                                <label for="status">分组类型:</label>
                                <select class="form-control" id="groupType" name="groupType">
                                    <option value="e.name">员工</option>
                                    <!--value值是根据mybatisDATE_FORMAT(date类型数据,date格式)-->
                                    <option value="DATE_FORMAT(c.input_time, '%Y')">年</option>
                                    <option value="DATE_FORMAT(c.input_time, '%Y-%m')">月</option>
                                    <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">日</option>
                                </select>
                            </div>
                        <#--分组类型回显-->
                            <script>
                                $("#groupType").val("${qo.groupType!}")
                            </script>
                            <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                                查询
                            </button>
                            <button type="button" class="btn btn-info btn-chart" data-url="/customerReport/bar.do">
                                <span class="glyphicon glyphicon-stats"></span> 柱状图
                            </button>
                            <button type="button" class="btn btn-warning btn-chart" data-url="/customerReport/pie.do">
                                <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                            </button>
                        </form>
                    </div>

                    <table class="table table-hover table-bordered">
                        <tr>
                            <th>分组类型</th>
                            <th>潜在客户新增数</th>
                        </tr>
                            <#list pageResult.list as m>
                            <tr>
                                <td>${m.groupType}</td>
                                <td>${m.number}</td>
                            </tr>
                            </#list>
                    </table>
                    <#include "../common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>
</body>
<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
</html>